<template>
  <div class="order-tag">
    <a-tooltip
      placement="topLeft"
      :title="tagData.value"
      v-if="$tools.notEmpty(tagData.id)"
    >
      <a-tag :color="tagData.color" @click="addTag">
        <span v-if="tagData.value">{{ tagData.value }}</span>
        <span style="opacity: 0;" v-else>-</span>
      </a-tag>
    </a-tooltip>
    <c-button
      type="link"
      @click="addTag"
      v-else-if="$verifyBtn('updateOrderTag')"
    >
      添加
    </c-button>
    <c-modal
      v-model="tagVisible"
      :width="290"
      :title="null"
      :bodyStyle="{ paddingTop: 0, minHeight: '300px' }"
      :closeable="false"
      :maskClosable="true"
      destroyOnClose
      noFooter
    >
      <div class="title tc bold" style="padding: 10px 0 20px;">
        <span class="fs-16" style="lineHeight: 32px">订单标签</span>
        <c-button
          type="link"
          style="position: absolute"
          @click="updateTag"
          v-if="$verifyBtn('updateTags')"
        >
          <c-icon type="tousujianyi" />编辑</c-button
        >
      </div>
      <div class="tagWrapper" :style="updating ? {} : { height: '450px' }">
        <div
          class="updateTagList"
          :class="[updating ? 'rotateUpdateTagList' : '']"
        >
          <p
            v-for="(item, index) in updateTagList"
            :key="item.color"
            class="flex"
          >
            <a-tag :color="item.color" style="width: 32px;height: 32px"></a-tag>
            <a-textarea
              v-model.trim="updateTagList[index].value"
              :maxLength="10"
              rows="1"
              placeholder="自定义标签，限10字"
            ></a-textarea>
          </p>
          <div class="flex-around" style="paddingTop: 10px">
            <c-button @click="updating = false">返回</c-button>
            <c-button type="primary" @click="updateTagSubmit">保存</c-button>
          </div>
        </div>
        <div class="tagList" :class="[updating ? 'rotateTagList' : '']">
          <template v-for="item in tagList">
            <p
              class="tag"
              :class="[tagData.color === item.color ? 'selectedTag' : '']"
              :key="item.color"
              :style="tagStyle(item)"
              @click="selectTag(item)"
            >
              <span>{{ item.value }}</span>
              <a-icon
                type="check"
                class="tag-checked-icon"
                v-if="tagData.color === item.color"
              />
            </p>
          </template>
        </div>
      </div>
      <!-- <div class="updateTagList" v-if="updating">
        <p
          v-for="(item, index) in updateTagList"
          :key="item.color"
          class="flex"
        >
          <a-tag :color="item.color" style="width: 32px;height: 32px"></a-tag>
          <a-textarea
            v-model.trim="updateTagList[index].value"
            :maxLength="10"
            rows="1"
            placeholder="自定义标签，限20字"
          ></a-textarea>
        </p>
        <div class="flex-around" style="paddingTop: 10px">
          <c-button @click="updating = false">返回</c-button>
          <c-button type="primary" @click="updateTagSubmit">保存</c-button>
        </div>
      </div>
      <template v-else>
        <div class="tagList">
          <template v-for="item in tagList">
            <p
              class="tag"
              :class="[tagData.color === item.color ? 'selectedTag' : '']"
              :key="item.color"
              :style="tagStyle(item)"
              @click="selectTag(item)"
            >
              <span>{{ item.value }}</span>
              <a-icon
                type="check"
                class="tag-checked-icon"
                v-if="tagData.color === item.color"
              />
            </p>
          </template>
        </div>
      </template> -->
    </c-modal>
  </div>
</template>

<script>
import { providerupdatetags, providerupdateordertag } from "@/api/order/tag";

export default {
  props: {
    // 已设置的标签
    tags: {
      type: String,
      default: ""
    },
    // 订单信息
    orderData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      tagVisible: false,
      updateTagList: [
        {
          color: "#FC6D65",
          value: "",
          id: 1
        },
        {
          color: "#FFB166",
          value: "",
          id: 2
        },
        {
          color: "#E7BB0E",
          value: "",
          id: 3
        },
        {
          color: "#93C36B",
          value: "",
          id: 4
        },
        {
          color: "#699BFF",
          value: "",
          id: 5
        },
        {
          color: "#4f953b",
          value: "",
          id: 6
        },
        {
          color: "#80d4f6",
          value: "",
          id: 7
        },
        {
          color: "#e97f02",
          value: "",
          id: 8
        },
        {
          color: "#D171FE",
          value: "",
          id: 9
        },
        {
          color: "#D0628D",
          value: "",
          id: 10
        }
      ],
      tagList: [],
      selectedTag: {},
      updating: false
    };
  },
  computed: {
    tagStyle() {
      return val => {
        return {
          position: "relative",
          backgroundColor: val.color,
          fontSize: "13px",
          padding: "0 20px 0 16px",
          color: "#fff",
          textShadow: "0 0 1px rgb(0 0 0 / 50%)",
          borderRadius: "2px",
          fontWeight: "bold",
          cursor: "pointer",
          minHeight: "32px",
          lineHeight: "32px"
        };
      };
    },
    // 标签信息
    tagData() {
      let res;
      if (this.orderData.orderTag) {
        if (this.tagList.length !== 0) {
          let tag = this.tagList.filter(
            item => item.id === this.orderData.orderTag
          );
          res = tag[0];
        } else {
          res = {};
        }
      } else {
        res = {};
      }
      return res;
    }
  },
  methods: {
    // 选择标签
    selectTag(val) {
      this.selectedTag = this.selectedTag.color === val.color ? {} : val;
      providerupdateordertag({
        orderId: this.orderData.id,
        tagId: this.selectedTag.id
      }).then(() => {
        this.$emit("selectTag", {
          tag: this.selectedTag,
          id: this.orderData.id
        });
        this.tagVisible = false;
      });
    },
    // 添加标签
    addTag() {
      this.tagVisible = true;
      this.updating = false;
      if (this.tags) {
        this.updateTagList = JSON.parse(this.tags);
        this.tagList = JSON.parse(this.tags);
        // this.tagList = JSON.parse(this.tags).filter(item =>
        //   this.$tools.notEmpty(item.value)
        // );
      }
    },
    // 更新标签
    updateTag() {
      this.updateTagList = JSON.parse(JSON.stringify(this.tagList));
      this.updating = true;
    },
    updateTagSubmit() {
      providerupdatetags({
        tags: JSON.stringify(this.updateTagList)
      }).then(() => {
        this.tagList = JSON.parse(JSON.stringify(this.updateTagList));
        this.updating = false;
        this.$emit("updateTags", this.tagList);
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tagList = this.tags
        ? JSON.parse(this.tags)
        : JSON.parse(JSON.stringify(this.updateTagList));
      if (this.orderData.orderTag) {
        let tag = this.tagList.filter(
          item => item.id === this.orderData.orderTag
        );
        this.selectedTag = tag[0];
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.order-tag {
  // min-width: 100px;
  .ant-tag {
    overflow: hidden;
    max-width: 80px;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .updateTagList {
    p {
      width: 240px;
    }
    .ant-tag {
      margin-right: 10px;
    }
  }
  .tagList {
    .tag {
      width: 210px;
      transition: width 0.25s;
    }
    .tag:not(.selectedTag):hover {
      width: 230px;
    }
    .selectedTag {
      width: 240px;
    }
  }
}
.tag-checked-icon {
  font-size: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
}

.tagWrapper {
  position: relative;
  width: 100%;
  height: 510px;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: 0.35s;
  .updateTagList,
  .tagList {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transition: 0.35s;
  }
  .updateTagList {
    transform: rotateY(180deg);
  }
  // &:hover {
  .rotateUpdateTagList {
    transform: rotateY(360deg);
  }
  .rotateTagList {
    transform: rotateY(180deg);
  }
  // }
}
</style>
